<script setup>
    import { getArticleListAPI, delArticleAPI } from '@/api/article';
    import { reactive, ref, watch, computed } from 'vue';
    import { ElMessageBox, ElMessage } from 'element-plus';
    import Article from './component/Article.vue';
    import { OPERATION_TYPE } from '@/constant';

    // 文章列表信息
    const articleListInfo = reactive({
        total: 0, // 文章总数
        rows: [] // 文章列表
    })
    // 请求参数
    const articleQuery = reactive({
        current: 1, // 当前页码
        pageSize: 10 // 每页数量
    })
    // 获取文章列表
    const getArticleList = async () => {
        // 获取文章列表响应数据
        const resp = await getArticleListAPI(articleQuery)
        // 保存数据
        Object.keys(articleListInfo).forEach((key) => {
            articleListInfo[key] = resp[key]
        })
    }
 
    getArticleList()

    // 分页器数据渲染
    // -- 将 current 与分页器页码双向绑定，再对其进行监听，当数据发生变更时，重新请求列表数据
    watch(articleQuery, () => {
        // 当页码发生变更时，重新获取数据并渲染
        getArticleList()
    })

    // 删除文章
    const onDelete = async (articleId) => {
        // 删除确认提示
        try{
            await ElMessageBox.confirm(
                "此操作不可逆，请确认是否删除？",
                "提示",
                {
                    confirmButtonText: "确认",
                    cancelButtonText: "取消",
                    type: "warning"
                }
            )
            // 调用api删除
            await delArticleAPI(articleId)
            // 删除成功提示
            ElMessage.success("删除成功！")
            // 重新获取数据渲染页面
            getArticleList()
        } catch(e) {
            ElMessage.info("取消操作")
        }
    }

    // 当前操作类型
    const currentOperationType = ref("")
    // 当前操作id
    const currentArticleId = ref("")
    // 标题映射关系
    const TITLE_MAP = {
        "view": "预览",
        "edit": "编辑",
        "add": "新增"
    }
    // 当前抽屉标题
    const currentTitle = computed(() => {
        return TITLE_MAP[currentOperationType.value] + "文章"
    })
    // 控制抽屉组件是否展示
    const isVisible = ref(false)

    // 打开抽屉组件
    const onOpen = (operationType, articleId) => {
        // 打开抽屉
        isVisible.value = true
        // 根据触发时机不同，修改当前操作类型
        currentOperationType.value = OPERATION_TYPE[operationType]
        // 保存当前操作id
        currentArticleId.value = articleId || ""
    }

    // 关闭抽屉组件
    const onClose = () => {
        isVisible.value = false
    }

</script>

<template>
    <div class="article-box">
        <!-- 面包屑导航 -->
        <div class="navigation">
            <el-breadcrumb separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>文章管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 主体内容 -->
        <div class="content">
            <el-card>
                <!-- 卡片头部 -->
                <template #header>
                    <span>共{{ articleListInfo.total }}条记录</span>
                    <el-button 
                    type="primary"
                    round
                    @click="onOpen(OPERATION_TYPE.add)">
                        <el-icon><Plus /></el-icon>
                        <span>新增文章</span>
                    </el-button>
                </template>
                <!-- 卡片主体 -->
                <template #default>
                    <el-table
                    :data="articleListInfo.rows"
                    border
                    stripe>
                        <el-table-column 
                        label="标题"
                        width="350"
                        prop="stem"></el-table-column>
                        <el-table-column 
                        label="作者"
                        width="170"
                        prop="creator"></el-table-column>
                        <el-table-column 
                        label="类别"
                        width="160"
                        prop="category"></el-table-column>
                        <el-table-column 
                        label="点赞"
                        width="160"
                        prop="likeCount"
                        sortable></el-table-column>
                        <el-table-column 
                        label="浏览数"
                        width="160"
                        prop="views"
                        sortable></el-table-column>
                        <el-table-column 
                        label="创建时间"
                        width="200"
                        prop="createdAt"
                        sortable></el-table-column>
                        <el-table-column 
                        label="操作"
                        min-width="200px">
                            <template #default="{ row }">
                                <el-tooltip
                                effect="dark"
                                content="预览"
                                placement="bottom">
                                    <el-icon 
                                    :size="18"
                                    @click="onOpen(OPERATION_TYPE.view, row.id)"><View/></el-icon>
                                </el-tooltip>
                                <el-tooltip
                                effect="dark"
                                content="编辑"
                                placement="bottom">
                                    <el-icon 
                                    :size="18"
                                    @click="onOpen(OPERATION_TYPE.edit, row.id)"><Edit/></el-icon>
                                </el-tooltip>
                                <el-tooltip
                                effect="dark"
                                content="删除"
                                placement="bottom">
                                    <el-icon 
                                    :size="18"
                                    @click="onDelete(row.id)"><Delete/></el-icon>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                <!-- 卡片尾部 -->
                <template #footer>
                    <el-pagination 
                    background 
                    layout="prev, pager, next" 
                    :total="articleListInfo.total" 
                    v-model:current-page="articleQuery.current"/>
                </template>
            </el-card>
            <!-- 抽屉组件 -->
            <el-drawer
                v-model="isVisible"
                :title="currentTitle"
                direction="rtl"
                size="55%">
                <!-- 将抽屉组件主体内容重新封装一个组件进行展示(提升开发难度) -->
                <!-- 需要给组件绑定key，否则其只会加载一次 -->
                <!-- key值绑定时间戳，保证每次进入都会渲染 解决了 -->
                <Article 
                :operateType="currentOperationType"
                :articleId="currentArticleId" 
                :key="Date.now()"
                @close="onClose"
                @reload="getArticleList"/>
            </el-drawer>
        </div>
    </div>
</template>

<style scoped lang="scss">
    .article-box {
        .content {
            .el-card{
                margin-top: 24px;
                // 卡片头部
                :deep(.el-card__header) {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                :deep(.el-card__footer) {
                    display: flex;
                    justify-content: center;

                    border: none;
                    margin-top: -15px;
                }
                :deep(.el-table__body) {
                    .el-icon {
                        cursor: pointer;
                    }
                    .el-icon:nth-child(2) {
                        margin: 0 18px;
                    }
                    .el-table__row {
                        height: 50px;
                    }
                }
            }
        }
    }
</style>